<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    import { colorOptions } from '../../util/common.js'
    import { rainbowData } from '../../util/pie-mock-data'
    export default {
        name: 'Pie-rose-half',
        components: {},
        props: {
            chartData: {
                type: Array,
                default: () => []
            },
            
            labelKey: {
                type: String,
                default: 'name'
            },

            valueKey: {
                type: String,
                default: 'value'
            },

            model: {
                type: String,
                default: 'rainbow'
            },

            // top   bottom
            direction: {
                type: String,
                default: 'bottom'
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'labelColor': '#e5e5e5',
                    }
                }
            }
        },
        mixins: [chartmixins],
        data() {
            return {
                defaultOptions: {
                    color: colorOptions[this.model],
                    series: [
                        {
                            name: "XX线索",
                            type: "pie",
                            radius: ["20%", "80%"],
                            avoidLabelOverlap: false,
                            startAngle: 0,
                            center: this.direction === 'top' ? ["50%", "75%"] : ["50%", "25%"],
                            roseType: "area",
                            selectedMode: "single",

                            label: {
                                formatter: "{c}千万元",
                                color: this.chartStyle.labelColor,
                                fontSize: this.formatFontSize(12)
                            },
                            labelLine: {
                                length: this.formatFontSize(30),
                                length2: this.formatFontSize(10),

                                lineStyle: {
                                    width: this.formatFontSize(1.5)
                                }
                            },
                            data: []
                        }
                    ]
                }
            }
        },
        computed: {
            formatColor() {
                return colorOptions[this.model] || colorOptions['nromal']
            },
        },
        watch: {
            chartData(newVal) {
                this.refreshChartData(newVal)   
            }
        },
        methods: {
            refreshChartData(chartData = this.chartData) {
                const datalist = chartData.map(item => {
                    return {
                        name: item[this.labelKey],
                        value: item[this.valueKey]
                    }
                })
                const filllist = chartData.map(() => {
                    return {
                        value: 0,
                        name: "",
                        label: { show: false },
                        labelLine: { show: false },
                    }
                })
                if(this.direction === 'top') {
                    this.defaultOptions.series[0].data = [...filllist, ...datalist]
                } else {
                    this.defaultOptions.series[0].data = [...datalist, ...filllist]
                }
                this.setOption(this.defaultOptions, true)
            }   
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshChartData(rainbowData)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>